<script lang="ts" setup>
import { onMounted, reactive, ref, unref } from 'vue';
import { useRoute } from 'vue-router';

import { Button, Card, Step, Steps } from 'ant-design-vue';

import { useMessage } from '#/hooks/web/useMessage';

import EditIndex from './modules/Edit.vue';
import EditField from './modules/Field.vue';
import EditGenerator from './modules/Generator.vue';
import EditPreview from './modules/Preview.vue';

defineOptions({
  name: '修改代码配置',
  inheritAttrs: false,
});

const editRef = ref<any>(null);
const fieldRef = ref<any>(null);
const previewRef = ref<any>(null);
const generatorRef = ref<any>(null);
const route = useRoute();
const { notification } = useMessage();

const pageState = reactive<{
  batch: boolean;
  content: string;
  current: number;
  status: 'error' | 'finish' | 'process' | 'wait' | undefined;
  tableId: string;
  title: string;
}>({
  title: '修改字段配置',
  content: '',
  tableId: '',
  status: undefined,
  current: 0,
  batch: false,
});
const compState = reactive({
  absolute: false,
  loading: false,
  theme: 'dark',
  background: 'rgba(111,111,111,.7)',
  tip: '加载中...',
});

// 获取应用资源表单
function getFieldRef() {
  return unref(fieldRef);
}

function getEditRef() {
  return unref(editRef);
}

function getPreviewRef() {
  return unref(previewRef);
}

function getGeneratorRef() {
  return unref(generatorRef);
}

function setLoading(loading: boolean) {
  compState.loading = loading;
}

async function handleSubmit() {
  await getEditRef().handleSubmit();
}

onMounted(async () => {
  const { params: routeParams, query: routeQuery } = route;
  pageState.tableId = routeParams.id as string;
  pageState.title = routeQuery.title as string;
  pageState.content = routeQuery.content as string;
  if (routeParams?.id?.includes(',')) {
    pageState.batch = true;
  }
  setLoading(true);
  try {
    await getEditRef().load(pageState.tableId);
    await getFieldRef().load(pageState.tableId, pageState.batch);
    await getGeneratorRef().load(pageState.tableId);
  } finally {
    setLoading(false);
  }
});

async function changeSteps(curr: number) {
  setLoading(true);
  pageState.status = undefined;
  try {
    if (curr !== 0) {
      try {
        await getEditRef().validate();
      } catch {
        notification.warning({
          message: '提示',
          description: '请完善表单信息',
        });
        pageState.current = 0;
        pageState.status = 'error';
        return;
      }
    }
    const previewIndex = 2;
    if (curr === previewIndex) {
      await getPreviewRef().load(pageState.tableId);
    }
    pageState.current = curr;
  } finally {
    setLoading(false);
  }
}
</script>

<template>
  <Card size="small">
    <template #title>
      <div class="step-form-form font-size-3">
        <Steps
          type="navigation"
          size="small"
          :current="pageState.current"
          @update:current="changeSteps"
        >
          <Step
            title="生成信息"
            :status="pageState.status"
            description="前后端代码生成的通用配置"
          />
          <Step title="字段信息" description="前后端的字段信息" />
          <Step title="代码预览" description="在线预览代码" />
          <Step
            title="立即生成"
            description="开发环境可生成在本地，其他环境下载后复制到项目中"
          />
        </Steps>
      </div>
    </template>
    <template #extra>
      <Button
        v-if="pageState.current === 0"
        :loading="compState.loading"
        type="primary"
        @click="handleSubmit"
      >
        保存
      </Button>
    </template>

    <div>
      <div v-show="pageState.current === 0">
        <EditIndex ref="editRef" />
      </div>
      <div v-show="pageState.current === 1">
        <EditField ref="fieldRef" />
      </div>
      <div v-show="pageState.current === 2">
        <EditPreview ref="previewRef" />
      </div>
      <div v-show="pageState.current === 3">
        <EditGenerator ref="generatorRef" />
      </div>
    </div>
  </Card>
</template>

<style lang="scss" scoped>
.step-form-form {
  width: 750px;
  padding-bottom: 20px;
  margin: 0 auto;
}
</style>
